<template>
	<view class="container">
		<l-file ref="lFile" @up-success="upSuccess"></l-file>
		<view class="top">
			<view class="tdmc ">
				<text>课程名称</text>
				<text class="right">{{model.name}}</text>
			</view>
			<block v-if="model.demand != undefined ">
				<view class="u-m-l-30 tdmc">
					<text>课程类型</text>
					<text class="right">{{model.demand.kclx}}</text>
				</view>

				<view class="tdmc u-m-l-30">
					<text>课程分类</text>
					<text class="right">{{model.demand.kcfl}}</text>
				</view>

				<block v-if="model.demand.kcfl == '专家课程' || model.demand.kcfl == '牛人课程'">
					<view class="tdmc u-m-l-30">
						<text>专业方向</text>
						<text class="right">{{model.demand.specialty}}</text>
					</view>
					<view class="tdmc u-m-l-30">
						<text>课程内容</text>
						<text class="right">{{model.demand.kcnr}}</text>
					</view>
				</block>
				<block v-if="model.demand.kcfl == '高校课堂'">
					<view class="tdmc u-m-l-30">
						<text>专业方向</text>
						<text class="right">{{model.demand.specialty}}</text>
					</view>
				</block>
				<block v-if="model.demand.kcfl == '培训机构课堂'">
					<view class="tdmc u-m-l-30">
						<text>阶段</text>
						<text class="right">{{model.demand.jd}}</text>
					</view>
				</block>
				<block v-if="model.demand.kcfl == '职业教育培训'">
					<view class="tdmc u-m-l-30">
						<text>培训方向</text>
						<text class="right">{{model.demand.pxfx}}</text>
					</view>
				</block>
			</block>
			<view class="fgx">
			</view>
		</view>
		<view class="jiafang" v-if="model.partyA">
			<view class="u-font-30 xmfp u-m-l-30 u-m-t-30">导师</view>
			<view class="u-flex u-col-center u-p-20 u-m-20">
				<view class="xmkk" :style="{ backgroundImage: 'url(' + logoMask + ')' }">
					<text class="u-line-2">{{ model.partyA.username }}</text>
				</view>
			</view>
			<view class="fgx">
			</view>
		</view>
		<view class="u-m-t-30 u-m-l-10 u-m-r-10 ">
			<view class="u-flex u-row-between tdcy" @click="selectShow(0)">
				<view class="u-font-30 u-m-l-30" style="font-weight: bold;">
					学员
				</view>
				<view class="u-flex u-row-center u-m-r-30" style="margin-left: auto;">
					<text class="u-font-30" style="color: #AB61FF;" v-if="model.partyB != undefined">{{model.partyB.length}}个</text>
				</view>
				<u-icon name="arrow-down" style="margin-right: 20upx;" @click="selectShow(0,true)" v-if="!flagList[0]"></u-icon>
				<u-icon name="arrow-up" style="margin-right: 20upx;" @click="selectShow(0,false)" v-if="flagList[0]"></u-icon>
			</view>
			<u-read-more :toggle="toggle" :show-height="showHeight" ref="uReadMore" closeText="收起" open-text="查看全部">
				<view v-for="(item, index) in model.partyB"
					:key="index">
				<view
					class="f-list u-row-between u-border-bottom u-flex u-m-r-20 u-m-l-20 u-p-t-20 u-p-b-20"
					
					v-show="flagList[0]"
					@click="showChildren(index)"
				>
					<block v-if="item.id != $store.state.userInfo.id">
						<view class="u-flex">
							<view class="qylg" :style="{ backgroundImage: 'url(' + logoMask + ')' }">
								<text class="u-line-2">{{ item.username }}</text>
							</view>
							<view class="f-item u-m-l-32">
								<view class="title u-flex u-row-between">
									<view class="">
										<text class="name">{{ item.username }}</text>
										<text v-if="item.leader" class="tz">团长</text>
										<text v-if="item.type == 10" class="td">团队</text>
									</view>
									<view class="bzj" v-if="item.bond">
										<text>￥{{ item.bond }}</text>
									</view>
								</view>
								<view class="explain" v-if="item.type == 10 && item.children.length">团队成员{{item.children.length}}人</view>
								
							</view>
						</view>
						<u-icon name="arrow-down" style="margin-right: 20upx;" v-if="item.type == 10 && !item.show"></u-icon>
						<u-icon name="arrow-up" style="margin-right: 20upx;"  v-if="item.type == 10 && item.show"></u-icon>
					</block>
					<block v-else>
						<view class="u-flex">
							<view class="qylg" :style="{ backgroundImage: 'url(' + logoMask + ')' }">
								<text class="u-line-2">{{ item.username }}</text>
							</view>
							<view class="f-item u-m-l-32">
								<view class="title u-flex-col">
									<view class="">
										<text class="name">{{ item.username }}</text>
										<text v-if="item.leader" class="tz">团长</text>
										
									</view>
								</view>
							</view>
						</view>
						<view class="scxy u-flex u-row-center" @click="needPay(item.bond)">缴纳课时费</view>
					</block>
					</view>
					<view class="u-p-20 team-bg" v-if="item.show && item.children && item.children.length">
						<view
							class="f-list u-row-between u-border-bottom u-flex u-m-r-20 u-m-l-20 u-p-t-20 u-p-b-20" v-for="(v, t) in item.children" :key="'c' + t">
						<view  class="u-flex">
							<view class="qylg" :style="{ backgroundImage: 'url(' + logoMask + ')' }">
								<text class="u-line-2">{{ v.name }}</text>
							</view>
							<view class="f-item u-m-l-32">
								<view class="title u-flex-col">
									<view class="">
										<text class="name">{{ v.name }}</text>
										<text v-if="v.leader" class="tz">团长</text>
									</view>
									<view class="explain" v-if="v.bond === null">已缴纳课时费</view>
								</view>
							</view>
						</view>
						<view v-if="!v.bond" class="scxy u-flex u-row-center" @click="needPay(v.bond)">缴纳课时费</view>
						</view>
					</view>
				</view>
			</u-read-more>
		</view>
		<view class="fgx u-m-t-30">
		</view>
		<view class="middle-tdxy" style="overflow: hidden;">
			<view @click="selectShow(2)" class=" u-flex u-row-between u-m-l-30 u-m-t-30">
				<view class="u-font-30 xmfp">合同签订</view>
				<view class="u-flex u-row-between">
				<view v-show="show" class="scxy" style="margin-right: 30upx;">
					<image style="" src="../../../static/img/jh.png" mode=""></image>
					<text @click="onUpload(true)">上传协议</text>
				</view>
				<u-icon name="arrow-down" style="margin-right: 20upx;" @click="selectShow(2,true)" v-if="!flagList[2]"></u-icon>
				<u-icon name="arrow-up" style="margin-right: 20upx;" @click="selectShow(2,false)" v-if="flagList[2]"></u-icon>
				</view>
			</view>
			
			<view v-for="(item,index) in model.fileAgrees" :key="index" class="tdxy u-m-l-30 u-m-t-30" @click="loadFile(item.path)"
			 v-if="flagList[2]">
				<view class="word u-m-l-30 u-p-t-30">
					<image src="../../../static/img/word.png" mode=""></image>
					<text class="u-line-1">{{item.oldName}}</text>
				</view>
				<view class="sctime u-m-l-30 u-m-r-30 u-p-t-30 u-flex u-row-between">
					<view class="u-flex">
						<text class="scsj">上传时间:</text>
						<text class="sctime">{{ item.uploadTime }}</text>
					</view>
					<view v-if="$store.state.userInfo.id == item.userId" @click="delFile(item.id)">删除</view>
				</view>
			</view>
		</view>
		<view class="fgx u-m-t-30">
		</view>
		<view class="middle-hyjy  u-m-t-30">
			<view @click="selectShow(3)" class=" u-flex u-row-between u-m-l-30 ">
				<view class="u-font-30 xmfp">会议纪要</view>
				<view class="u-flex u-row-between">					
					<view v-show="show" @click="tonewSummary(id)" class="scxy" style="margin-right: 30upx;">
						<image style="" src="../../../static/img/jh.png" mode=""></image>
						<text>新增纪要</text>
					</view>
					<u-icon name="arrow-down" style="margin-right: 20upx;" @click="selectShow(3,true)" v-if="!flagList[3]"></u-icon>
					<u-icon name="arrow-up" style="margin-right: 20upx;" @click="selectShow(3,false)" v-if="flagList[3]"></u-icon>
				</view>

			</view>
			<view class="xhx" v-show="flagList[3]">
			</view>
			<view class="uni-padding-wrap uni-common-mt" v-show="flagList[3]">
				<swiper v-if="model.notepadRecords.length > 0" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item  v-for="(item,index) in model.notepadRecords" :key="index">
						<view class="u-m-l-30">
							<view class="u-flex u-m-t-35">
								<view class="ty">
								</view>
								<text class="xmjz">{{item.title}}</text>
								<text class="sctime" v-if="item.createTime != undefined">{{item.createTime.substr(0,10)}}</text>
							</view>
							<view class="u-flex">
								<view class="xx">
									
								</view>
								<view style="width: 100%;">
									<view class="zxjz u-m-t-15  u-m-b-15">
										{{item.content}}
									</view>
									<view class="u-flex" v-if="item.imgUrl != undefined">
										<view class="tp" v-for="(xitem,xindex) in item.imgUrl.split(',')" :key="xindex">
											<image @tap="previewImageStr(xindex,item.imgUrl)" :src="getImgUrl(xitem)" style="width: 100%;height: 100%;"></image>
										</view>
									</view>
									<view class="u-m-l-30 u-m-t-20 u-flex u-row-between u-col-center">
										<view class="u-flex u-col-center">
											<view class="tyqk">团员确认情况</view>
											<view class="hekuai" v-if="item.read != null">{{ item.read.length }}/{{ item.read.length + item.unread.length }}</view>
											<view class="hekuai" v-else>0/0</view>
											<view class="u-m-l-30" v-if="$store.state.userInfo.id == item.createUserId" @click="delSummary(item.id)">删除</view>
										</view>
										<view class="u-m-r-30"><image @click="toConfirmation(item)" class="sd" src="../../../static/img/sd.png" mode=""></image></view>
									</view>
								</view>
							</view>
							
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="fgx u-m-t-30 u-m-b-30">
		</view>

		
		<view class="u-m-l-30 u-m-t-30">
			<view class="u-flex u-row-between tdcy" @click="selectShow(5)">
				<view class="u-font-30" style="font-weight: bold;">文件</view>
				<view class="u-flex u-col-center">
					<view class="sc" style="margin-right: 30upx;" v-show="show">
						<image style="" src="../../../static/img/jh.png" mode=""></image>
						<text @click="onUpload(false)">上传</text>
					</view>
					<u-icon name="arrow-down" style="margin-right: 20upx;" @click="selectShow(5, true)" v-if="!flagList[5]"></u-icon>
					<u-icon name="arrow-up" style="margin-right: 20upx;" @click="selectShow(5, false)" v-if="flagList[5]"></u-icon>
				</view>
			</view>
		</view>
		<view class=" u-p-t-20 u-p-b-20" v-if="flagList[5]">
			<block v-for="(item, index) in model.files" :key="item.id">
				<u-swipe-action
					:show="item.show"
					:index="index"
					v-if="$store.state.userInfo.id == item.userId"
					@click="delFiles"
					@open="openFiles"
					:options="options"
					style="width: 100%;"
				>
					<view class="f-list u-flex u-p-t-20 u-p-b-20 u-col-center" style="display: flex;justify-content: space-between;">
						<view class="qylg"><image style="width: 64rpx; height: 64rpx;" src="../../../static/img/file.png" mode=""></image></view>
						<view class="f-item" style="flex: 1;" @click="onOpenDoc(item.path)">
							<view class="u-font-34">
								<text style="display:block;width:400rpx;" class="u-line-1">{{ item.oldName }}</text>
							</view>
							<view class="title u-flex u-m-t-12" style="width: 80%;">
								<text class="name">{{ item.userName }}</text>
								<view class="u-flex u-row-between" style="width: 100%;">
									<text class="rq">{{ item.uploadTime.substr(0, 10) }}</text>
									<text class="wjdx">{{ item.size / 1000 + 'KB' }}</text>
								</view>
							</view>
						</view>
						<view class="xz" @click="onDown(item.path)" style="margin-right: 20upx;">下载</view>
					</view>
				</u-swipe-action>
				<view class="f-list u-flex u-p-t-20 u-p-b-20 u-col-center" v-else style="display: flex;justify-content: space-between;">
					<view class="qylg "><image style="width: 64rpx; height: 64rpx;" src="../../../static/img/file.png" mode=""></image></view>
					<view class="f-item " style="flex: 1;" @click="onOpenDoc(item.path)">
						<view class="u-font-34">
							<text style="display:block;width:400rpx;" class="u-line-1">{{ item.oldName }}</text>
						</view>
						<view class="title u-flex u-m-t-12" style="width: 80%;">
							<text class="name">{{ item.userName }}</text>
							<view class="u-flex u-row-between" style="width: 100%;">
								<text class="rq">{{ item.uploadTime.substr(0, 10) }}</text>
								<text class="wjdx">{{ item.size / 1000 + 'KB' }}</text>
							</view>
						</view>
					</view>
					<view class="xz" @click="onDown(item.path)" style="margin-right: 20upx;">下载</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import lFile from '@/components/l-file/l-file.vue'
	export default {
		components: {lFile},
		data() {
			return {
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				localPath: '',
				logoMask: this.$mAssetsPath.logoMask,
				baseUrl:this.$mConfig.baseUrl,
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				flagList: [false, false, false, false, false, false],
				id: 0,
				toggle: false,
				showHeight: 300,
				bjxm: "../../static/homepage/xmkk.png",
				list: [],
				filelist: [],
				model: {
					courses: [],
					fileAgrees: [],
					files: [],
					notepadRecords: [],
					course: {},
					teamUsers: [],
				},
				isLeader:false,
				userId:'',
				show:true,
				courses: [],
				checkLeader:false,
				syncCourse: {
					id:'',
					userId:'',
					type:10,
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;
				this.syncCourse.id = options.id;
			}
			if(options.userId){
				this.userId = options.userId;
				this.syncCourse.userId = options.userId;
			}
			if(options.teamChatId){
				this.teamChatId = options.teamChatId;
				this.showcheckLeader();
			}
			uni.setStorageSync('syncCourse',this.syncCourse)
			
		},
		onShow(){
			this.initPage(this.id);
			this.listAddedCourse()
			this.getcheckLeader()
		},
		methods: {
			async needPay(val) {
				var payMoney = this.model.demand.integrityDeposit?this.model.demand.integrityDeposit:0.01;
				if(!val) val= 0;
				if(this.model.demand.integrityDeposit){
					payMoney = parseFloat(this.model.demand.integrityDeposit) - parseFloat(val)
				}
				var payData = { payMoney: payMoney, type: 10, id: this.id }
				let { data, code } = await this.$apis.createTeamPayBond(payData)
				console.log('createTeamPayBond', data)
				data.name = this.model.name;
				data.payType = 2;
				if (code == 200) {
					this.$mRouter.push({
						route: this.$mRoutesConfig.pay,
						query: {
							datas: JSON.stringify(data)
						}
					})
				}
			},
			isNeedPay(val){
				if(!val) val= 0;
				if(this.model.demand.integrityDeposit){
					let money = parseFloat(this.model.demand.integrityDeposit) - parseFloat(val)
					if(money > 0){
						return true
					}else{
						return false
					}
				}else{
					return false
				}
			},
			toConfirmation(item) {
				uni.navigateTo({
					url: '../../notepad/zhihuiTeam/confirmation?id='+item.id
				})
			},
			async fetchGroupPersonBond(reqBody, index) {
				console.log('index', index)
				let { data } = await this.$apis.fetchGroupPersonBond(reqBody)
				let users = this.model.partyB[index] ? this.model.partyB[index] : []
				users.children = data
				users.show = !users.show
				this.model.partyB[index] = users
				this.$forceUpdate()
			},
			showChildren(index) {
				let users = this.model.partyB
				if (users && users[index] && users[index].type == 10) {
					var fromTeamId = users[index].fromTeamId.split('_')
					console.log('fromTeamId', fromTeamId)
					if (fromTeamId.length && fromTeamId[1] > 0) {
						let reqBody = {
							id: fromTeamId[1],
							type: 1
						}
						this.fetchGroupPersonBond(reqBody, index)
					}
				}
			},	
			async getcheckLeader(){
				let result = await this.$apis.checkLeader({teamChatId:"team_"+this.id});
				this.checkLeader = result.data;
			},
			delCourse(id) {
				var that = this
				uni.showModal({
					content: '删除该课程',
					success(res) {
						if (res.confirm) that.deleteUserCourse(id)
					}
				})
			},
			async deleteUserCourse(index) {
				let { code } = await this.$apis.deleteUserCourse({ id: this.courses[index].selectDataId })
				if (code == 200) {
					this.courses.splice(index, 1)
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				console.log('open', index)
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.courses[index].show = true
				this.courses.map((val, idx) => {
					if (index != idx) this.courses[idx].show = false
				})
			},
			delFiles(index) {
				var that = this
				uni.showModal({
					content: '删除该文件',
					success(res) {
						if (res.confirm) that.deleteFileAgrees(index)
					}
				})
			},
			async deleteFileAgrees(index) {
				let { code } = await this.$apis.deleteFileAgree({ id: this.model.files[index].id })
				if (code == 200) {
					this.model.files.splice(index, 1)
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			openFiles(index) {
				console.log('open', index)
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.model.files[index].show = true
				this.model.files.map((val, idx) => {
					if (index != idx) this.model.files[idx].show = false
				})
			},
			delFile(id) {
				var that = this
				uni.showModal({
					content: '删除该文件',
					success(res) {
						if (res.confirm) that.deleteFileAgree(id)
					}
				})
			},
			async deleteFileAgree(id) {
				let { code } = await this.$apis.deleteFileAgree({ id: id })
				if (code == 200) {
					this.initPage(this.id)
				}
			},
			delSummary(id) {
				var that = this
				uni.showModal({
					content: '删除该纪要',
					success(res) {
						if (res.confirm) that.deleteNotepadRecord(id)
					}
				})
			},
			async deleteNotepadRecord(id) {
				let { code } = await this.$apis.deleteNotepadRecord({ id: id })
				if (code == 200) {
					this.initPage(this.id)
				}
			},
			toCourse(id) {
				uni.navigateTo({
					url: '/pages/classroom/detail?id=' + id
				})
			},
			async listAddedCourse() {
				let body = {}
				console.log('userId', this.userId)
				if (this.userId) {				
					if(!this.checkLeader) this.teamUserId = this.$store.state.userInfo.id;
					body = {
						privateUserId: this.checkLeader?this.userId:this.$store.state.userInfo.id,
						userId: this.checkLeader?this.userId:this.$store.state.userInfo.id,
						groupId:this.id,
						type:10
					}
				} else {
					body = {
						groupId:this.id,
						type:10
					}
				}
				let { data } = await this.$apis.listAddedCourse(body)
				var arr = []
				data &&
					data.forEach(function(item, index) {
						item.show = false
						arr.push(item)
					})
				this.courses = arr
			},
			async showcheckLeader(){
				let result = await this.$apis.checkLeader({teamChatId:this.teamChatId});
				this.isLeader = result.data;
				if(!this.isLeader && this.userId != ''){
					this.show = false;
				}
			},
			onOpenDoc(file) {
				let url = this.$mConfig.baseUrl + file;
				/* 下载返回临时路径（退出应用失效） */
				this.$refs.lFile.download(url)
				.then(path=>{
					/* 预览 */
					this.$refs.lFile.open(path);
				});
			},			
			/* 保存 */
			onDown(file) {
				let url = this.$mConfig.baseUrl + file;
				this.$refs.lFile.download(url,'local')
				.then(path=>{
					this.localPath = path;
				}); 
			},			
			/* 上传 */
			onUpload(flag) { 
				this.$refs.lFile.upload({
					// #ifdef APP-PLUS
					// nvue页面使用时请查阅nvue获取当前webview的api，当前示例为vue窗口
					currentWebview: this.$mp.page.$getAppWebview(),
					// #endif
					//非真实地址，记得更换,调试时ios有跨域，需要后端开启跨域并且接口地址不要使用http://localhost/
					url: this.$mConfig.baseUrl + "/notepad/saveFile",
					//默认file,上传文件的key
					name: 'file',
					// header: {'Authorization':'token'},
					//...其他参数
					formData: {
						'businessId': this.id,
						'isAgree': flag,
						'type': 10,
						'userId': this.userId
					},
					header: {
						"X-requested-With": "XMLHttpRequest",
						"ZC-TOKEN": uni.getStorageSync('token')
					}
				});
			},
			upSuccess(res) {
				this.initPage(this.id);
			},
			selectShow(index, flag) {
				this.flagList[index] = !this.flagList[index];				
				this.initPage(this.id);
				this.$forceUpdate();
			},
			getImgUrl(url) {
				return this.$mConfig.baseUrl + url;
			},
			scroll(event) {
				//距离每个边界距离
				console.log(event.detail)
			},
			//滚动到底部/右边触发
			scrolltolower() {
				console.log(1111);
			},
			// 滚动到顶部/左边触发
			scrolltoupper() {
				console.log(2222);
			},
			loadFile(file) {
				uni.downloadFile({
					url: this.$mConfig.baseUrl + file,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},
			async initPage(id) {
				let reqBody = {
					id: id,
					type:10
				};
				if(this.userId != '') reqBody['userId'] = this.userId;
				let result = await this.$apis.summary(reqBody);
				this.model = result.data;
				var users = []
				if (this.model.demand && this.model.demand.integrityDeposit) {
					for (var i in this.model.partyB) {
						users[i] = this.model.partyB[i]
						users[i].children = []					
						users[i].show = false
						if (this.model.partyB[i].blod && this.model.partyB[i].id == that.$store.state.userInfo.id) {
							that.myblod = this.model.partyB[i].blod
						}
					}
				} else {
					for (var i in this.model.partyB) {
						users[i] = this.model.partyB[i]
						users[i].children = []			
						users[i].show = false
					}
				}
				this.model.partyB = users
				this.$forceUpdate()
			},
			kcxz() {
				uni.navigateTo({
					url: "/pages/classroom/choice?type=zhxxjsb"
				})
			},
			toTeamMembers() {
				let param = '';
				if(this.userId != '') param = "?userId="+this.userId;
				uni.navigateTo({
					url: "../../notepad/zhihuiTeam/teamMembers"+param
				})
			},
			toProjectAllocation() {
				let param = '';
				if(this.userId != '') param = "?userId="+this.userId;
				uni.navigateTo({
					url: "../../notepad/zhihuiTeam/projectAllocationDetails"+param
				})
			},
			tohomepage() {
				uni.navigateTo({
					url: "../../homepage/homepage"
				})
			},
			toteamPage() {
				uni.navigateTo({
					url: "../../homepage/teamPage"
				})
			},
			tonewSummary(id) {
				let param = '';
				if(this.userId != '') param = "&userId="+this.userId;
				uni.navigateTo({
					url: "../../notepad/zhihuiTeam/newSummary?&type=10&id=" + id+param
				})
			},
			toChoice(id) {
				if(this.checkLeader){
					
					let param = ''
					if (this.userId != '') param = '&userId=' + this.userId
					uni.navigateTo({
						url: '../../classroom/choice?type=10&id=' + id + param
					})
				}else{
					uni.showToast({
						title:"只有团长可以选择课程！",
						icon:'none'
					})
				}
			},
		},

	}
</script>

<style scoped lang="scss">
	.tdmc {
		// line-height: 100rpx;
		border-bottom: 2rpx solid #DADFED;
		width: 90%;
		margin-left: 5%;
		padding: 30rpx 30rpx 30rpx 0;
		display: flex;
		justify-content: space-between;

		text {
			font-size: 30rpx;
			color: #0D1D36;
		}

		.right {}

		.jine {
			color: #AB61FF;
		}
	}

	.tdtebie {
		border-bottom: none;
	}

	.fgx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
		margin-top: 30rpx;
	}

	.xmkk {
		width: 102rpx;
		height: 118rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 0 bottom;

		text {
			color: #888D99;
			font-size: 26rpx;
			line-height: 118rpx;
			margin-left: 27rpx;
		}
	}

	.xmfp {
		color: #0D1D36;
		font-weight: bold;
	}

	.xmfpxj {
		width: 690rpx;
		height: 600rpx;
		background: #F5F5F9;
		border-radius: 10rpx;

		.tubiao {
			color: #0D1D36;
			font-size: 30rpx;
		}

		.xhx {
			width: 100%;
			height: 1rpx;
			background-color: #CACEDB;
			margin-top: 20rpx;
		}
	}

	.qylg {
		width: 102rpx;
		height: 118rpx;
		background-size: 100% auto;
		background-position: 0 bottom;
		overflow: hidden;

			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			text {
				color: #888D99;
				font-size: 20rpx;
				padding:0 10rpx;
		}
	}

.td {
	padding:0 5rpx;
	color: #ffffff;
	font-size: 24rpx;
	height: 36rpx;
	background: #19C07D;
	border-radius: 6rpx;
	margin-left: 20rpx;
}
	.bzj {
		position: absolute;
		left: 550rpx;
		font-size: 36rpx;
		color: #FE5022;
	}

	.title {
		display: flex;
		justify-content: space-between;
	}

	.tz {
		width: 68rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		height: 36rpx;
		background: #AB61FF;
		border-radius: 6rpx;
		margin-left: 20rpx;
	}

	.name {
		font-size: 30rpx;
		color: #0D1D36;
		font-weight: bold;
	}

	.explain {
		color: #888D99;
		font-size: 26rpx;
	}

	.fpbl {
		position: absolute;
		left: 500rpx;

		text {
			font-size: 24rpx;
			color: #4B9CFF;
		}

		.fpblsz {
			width: 68rpx;
			height: 36rpx;
			border: 2rpx solid #4B9CFF;
			border-radius: 6rpx;
			margin-left: 10rpx;
		}

		.bfh {
			font-size: 24rpx;
			margin-left: 15rpx;
		}
	}

	.ckqb {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #FF8F28;
		margin-top: 30rpx;
	}

	.xhx {
		width: 100%;
		height: 2rpx;
		background-color: #DADFED;
		margin-top: 34rpx;
	}

	.scxy {
		display: flex;
		align-items: center;
		width: 190rpx;
		height: 52rpx;
		border: 2rpx solid #AB61FF;
		border-radius: 26rpx;
		color: #AB61FF;
		font-size: 26rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-top: 5rpx;
			margin-left: 26rpx;
		}
	}

	.tdxy {
		width: 690rpx;
		height: 159rpx;
		background: #F5F5F9;
		border-radius: 20rpx;

		.word {
			display: flex;
			align-items: center;

			image {
				width: 41rpx;
				height: 37rpx;
			}

			text {
				color: #4B9CFF;
				font-size: 30rpx;
				margin-left: 16rpx;
			}
		}
	}

	.scsj {
		color: #0D1D36;
		font-size: 26rpx;
	}

	.sctime {
		display: flex;
		align-items: center;
		color: #888D99;
		font-size: 30rpx;
		margin-left: 20rpx;
	}

	.ty {
		width: 18rpx;
		height: 18rpx;
		background: #888D99;
		border-radius: 50%;
	}

	
	.xmjz {
		color: #888D99;
		font-size: 30rpx;
		margin-left: 20rpx;
	}
	
	
	.xx {
		width: 2rpx;
		height: 2rpx;
		border: 2rpx dashed #888D99;
		opacity: 0.5;
		margin-left: 7rpx;
	}
	
	
	.zxjz {
		color: #0D1D36;
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 40rpx;
	}
	
	.tp {
		width: 192rpx;
		height: 192rpx;
		border-radius: 10rpx;
		background-color: #F5F5F9;
		margin-left: 30rpx;
		margin-top: 24rpx;
	}
	
	.tyqk {
		color: #0D1D36;
		font-size: 26rpx;
	}
	
	.hekuai {
		color: #FFFFFF;
		font-size: 26rpx;
		width: 72rpx;
		height: 32rpx;
		background: #4F5A78;
		border-radius: 4rpx;
		text-align: center;
		line-height: 32rpx;
		margin-left: 22rpx;
	}
	
	.sd {
		width: 48rpx;
		height: 48rpx;
	}
	
	.word {
		display: flex;
		align-items: center;
	
		image {
			width: 41rpx;
			height: 37rpx;
		}
	
		text {
			color: #4B9CFF;
			font-size: 30rpx;
			margin-left: 16rpx;
		}
	}
	.qymc {
		width: 102rpx;
		height: 118rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 0 bottom;

		text {
			color: #888D99;
			font-size: 20rpx;
			line-height: 118rpx;
			margin-left: 8rpx;
		}
	}

	.sc {
		display: flex;
		align-items: center;
		width: 136rpx;
		height: 52rpx;
		border: 2rpx solid #AB61FF;
		border-radius: 26rpx;
		color: #AB61FF;
		font-size: 26rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-top: 5rpx;
			margin-left: 26rpx;
		}
	}

	.f-list {

		border-bottom: 2rpx solid #DADFED;

	}

	.name {
		font-size: 28rpx;
		color: #4C9CFF;
	}

	.tz {
		width: 68rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		height: 36rpx;
		background: #AB61FF;
		border-radius: 6rpx;
		margin-left: 20rpx;
	}

	.xz {
		width: 114rpx;
		height: 50rpx;
		background: #4C9CFF;
		border-radius: 25rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		text-align: center;
		line-height: 50rpx;
		float: right;
	}

	.rq {
		font-size: 28rpx;
		color: #888E9A;
	}

	.wjdx {
		font-size: 28rpx;
		color: #888E9A;
		margin-left: 20rpx;
	}

	.scroll-view_H {
		white-space: nowrap;

		.scroll-view-item_H {
			display: inline-block;
			width: 100%;
			height: 100px;
		}

		.uni-bg-red {
			background: red;
		}

		.uni-bg-green {
			background: green;
		}

		.uni-bg-blue {
			background: blue;
		}
	}
	
	.swiper {height:500rpx;}
</style>
